<template>
  <div class="divLocationViewDisplay" >
    <div class="divTop">
      <div class="divTitle">库区总览</div>
      <div class="divOverView">
          <div class="divItem"><span class="spanLabel">库存总计:</span><span>{{areaOverview.total ? areaOverview.total : 0}}</span></div>
          <div class="divItem"><component-square :bgColor="bgColor.stop"></component-square><span class="spanLabel">停用库位:</span><span>{{areaOverview.stop}}</span></div>
          <div class="divItem"><component-square :bgColor="bgColor.use"></component-square><span class="spanLabel">占用库位:</span><span>{{areaOverview.use}}</span></div>
          <div class="divItem"><component-square :bgColor="bgColor.free"></component-square><span class="spanLabel">空闲库位:</span><span>{{areaOverview.free}}</span></div>
      </div>
    </div>
    <div class="divContent"  v-if="locationData.length > 0">
      <el-tooltip v-for="item in locationData " :key="item.id" effect="light" :open-delay='300'>
        <div slot="content">
          <div class="divToolTipContent">
            <div><span class="spanLabel">库位编号:</span><span class="spanContent">{{item.code}}</span></div>
            <div><span class="spanLabel">库位名称:</span><span class="spanContent">{{item.name}}</span></div>
            <div><span class="spanLabel">库位位置:</span><span class="spanContent">{{(item.locationRow  ? item.locationRow : '-') +'排' + (item.locationColumn ?   item.locationColumn : '-') +'列' + (item.locationLayer  ?  item.locationLayer :'-') +'层'}}</span></div>
            <div><span class="spanLabel">库位状态:</span><span class="spanContent">{{item.status === 0 ? '停用' : item.useStatus === 0 ? '空闲' : item.useStatus === 1 ? '未满' : '已满'}}</span></div>
            <div><span class="spanLabel">货品名称:</span><span class="spanContent">{{item.goodsName}}</span></div>
            <div><span class="spanLabel">货品数量:</span><span class="spanContent">{{item.goodsTotal}}</span></div>
          </div>
        </div>
      <component-square
      :class="item.status === 0 ? 'bgColorStop' : item.useStatus === 0 ? 'bgColorFree' :'bgColorUse'"
       :width="36" :radius="7" ></component-square>
      </el-tooltip>
    </div>
    <div
        class="emptyTip"
        v-else
      >
        <span class="imgIcon"></span>
        <p>暂无库位</p>
        <base-button class="importantButton" @click="btnAddAreaClick" style="margin-top:20px">新增库位</base-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { getAllLocationDetailList } from '@/module-base/api/location'
import { getAreaOverview } from '@/module-base/api/area'
import ComponentSquare from './component-square.vue'
import BaseButton from '@/components/base-button/index.vue'

@Component({
  name: 'ComponentView',
  components: {
    ComponentSquare,
    BaseButton
  }
})

export default class extends Vue {
  @Prop({ default: '' }) private areaId!: '';

  @Watch('areaId', { immediate: true })
  private onAreaIdChange(value: string) {
    if (value) {
      this.getAreaOverview()
      this.getLocationData()
    } else {
      this.locationData = []
      this.areaOverview = {
        total: 0,
        stop: 0,
        use: 0,
        free: 0
      }
    }
  }

  private locationData = []

  // 汇总数据
  private areaOverview = {
    total: 0,
    stop: 0,
    use: 0,
    free: 0
  }

  private bgColor = {
    stop: '#c3c3c3',
    use: '#00be76',
    free: '#b2dccc'
  }

  private async getLocationData() {
    const { data } = await getAllLocationDetailList({ areaId: this.areaId })
    this.locationData = data
    const parent = this.$parent as any
    parent.loading = false
  }

  private async getAreaOverview() {
    const { data } = await getAreaOverview(this.areaId)
    this.areaOverview = data
  }

  private btnAddAreaClick() {
    this.$router.push({ path: 'location/details/null' })
  }
}
</script>
<style lang="scss" scoped>
</style>
